<template>
  <el-container class="app_container flex">
    <Aside @handleNodeClick="handleNodeClick" />
    <div class="list_container flex both-100">
      <Breadcrumb title="隐患排查" />
      <div class="content_container">
        <!-- 搜索模块 -->
        <el-form ref="searchMap" :inline="true" :model="searchMap" class="serach_wrapper flex-space-between">
          <div class="search">
            <el-form-item prop="hazardsStatus">
              <el-select v-model="searchMap.hazardsStatus" placeholder="全部隐患状态" clearable size="small">
                <el-option v-for="dict in dict.type.hazards_status" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
            <el-form-item prop="dateRange" style="width: 240px">
              <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="daterange"
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="small"
                :default-time="['00:00:00', '23:59:59']"></el-date-picker>
            </el-form-item>
            <el-form-item prop="keyword">
              <el-input v-model="searchMap.keyword" placeholder="关键词搜索" size="small"></el-input>
            </el-form-item>
            <el-form-item class="flex">
              <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
              <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
            </el-form-item>
          </div>
          <div class="edit">
            <el-form-item class="flex">
              <el-button @click="handleAdd()" class="btn_primary" icon="el-icon-plus"> 新增 </el-button>
            </el-form-item>
          </div>
        </el-form>
        <!-- 搜索模块over -->

        <!-- 表格模块 -->
        <div class="table_container">
          <!-- v-loading="loading" -->
          <el-table :data="dataList" stripe class="per_table" style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column label="项目点位" align="center" prop="projectPointName" />
            <el-table-column label="状态" align="center" prop="hazardsStatus">
              <template slot-scope="scope">
                {{ dict.label.hazards_status[scope.row.hazardsStatus] }}
              </template>
            </el-table-column>
            <el-table-column label="隐患事项" align="center" prop="hazardsName" />
            <el-table-column label="隐患位置" align="center" prop="hazardsPosition" />
            <el-table-column label="发现人员" align="center" prop="findUserName" />
            <el-table-column label="发现时间" align="center" prop="createTime" />
            <el-table-column label="整改人员" align="center" prop="handleUserName" />
            <el-table-column label="整改时间" align="center" prop="handleTime" />
            <el-table-column label="隐患类型" align="center" prop="hazardsType">
              <template slot-scope="scope">
                {{ dict.label.hazards_type[scope.row.hazardsType] }}
              </template>
            </el-table-column>
            <el-table-column label="验收人" align="center" prop="checkUserName" />
            <el-table-column label="验收时间" align="center" prop="checkTime" />
            <el-table-column label="操作" width="200" fixed="right">
              <template slot-scope="scope">
                <div class="button-group">
                  <span type="text" class="tag_primary" size="small" @click="handleRectification(scope.row)">处理1</span>
                  <span type="text" class="tag_primary" size="small" @click="handleAcceptance(scope.row)">处理2</span>
                  <span type="text" class="tag_primary" size="small" @click="handleDetail(scope.row)">详情</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 表格模块over -->
        <!-- 分页 -->
        <Pagination v-show="total > 0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize"
          @change="getList"></Pagination>
        <!-- 分页over -->
        
      </div>
    </div>
    <!-- 弹窗 -->
        <!-- <HiddenTroubleDialong :dialogVisible="dialogVisible" :titleIndex="titleIndex" :descData="descData" :dictMap="dict" @cancel="handleCancel" @success="handleSuccess" /> -->
        <!-- 详情 -->
        <HiddenTroubleDetailDialong :dialogVisible="dialogVisible" @cancel="cancel" />
        <!-- 新增 -->
        <HiddenTroubleAddDialong :deptId="searchMap.deptId" :descData="descData" :dialogVisible="addDialogVisible" @cancel="addCancel" />
        <!-- 处理-核实整改 -->
        <HiddenTroubleRectificationDialong  :descData="descData" :dialogVisible="rectificatDionDialogVisible" @cancel="rectificatCancel" />
        <!-- 处理-核实整改 -->
        <HiddenTroubleAcceptanceDialong :dialogVisible="AcceptanceDionDialogVisible" @cancel="Acceptancecancel" />
  </el-container>
  
</template>

<script>
import Aside from '@/components/Aside';
import { listLoginInfo, delLoginInfo, cleanLoginInfo } from '@/api/log/login';
import HiddenTroubleDetailDialong from './HiddenTroubleDetailDialong.vue';
import HiddenTroubleAddDialong from './HiddenTroubleAddDialong.vue';
import HiddenTroubleRectificationDialong from './HiddenTroubleRectificationDialong.vue'
import HiddenTroubleAcceptanceDialong from './HiddenTroubleAcceptanceDialong.vue';
import { getHazardsList, getProjectPointControlList, getHazardsInfo, checkHazards, handleHazards } from '@/api';
import { EventBus } from '@/utils/eventbus'
export default {
  components: {
    HiddenTroubleDetailDialong,
    HiddenTroubleAddDialong,
    HiddenTroubleRectificationDialong,
    HiddenTroubleAcceptanceDialong,
    Aside,
  },
  name: 'role',
  dicts: ['hazards_status', "hazards_type"],
  data() {
    return {
      // 项目点列表
      projectPointList: undefined,
      // 遮罩层
      loading: false,
      // 日期范围
      dateRange: [],
      // 搜索条件
      searchMap: {
        pageNum: 1,
        pageSize: 10,
        deptId: undefined,
        endTime: undefined,
        hazardsStatus: undefined,
        keyword: undefined,
        startTime: undefined,
      },
      // 数据列表
      dataList: [],
      // 总条数
      total: 0,
      // 详情数据
      descData: {
        projectPointId: undefined,
        projectPointName: undefined,
        hazardsStatus: undefined,
        hazardsName: undefined,
        hazardsPosition: undefined,
        findUserName: undefined,
        createTime: undefined,
        handleUserName: undefined,
        handleTime: undefined,
        hazardsType: undefined,
        checkUserName: undefined,
        checkTime: undefined,
      },
      // 弹窗-新增，编辑头文字
      titleIndex: 0,
      // 弹窗-新增/编辑-显示隐藏
      dialogVisible: false,
      // 弹窗-新增显示隐藏
      addDialogVisible: false,
      // 弹窗-整改处理显示隐藏
      rectificatDionDialogVisible: false,
      // 弹窗-验收处理显示隐藏
      AcceptanceDionDialogVisible: false,
    };
  },
  created() {
    EventBus.$on('currentTree', (data) => {
      this.searchMap.deptId = data.id
      this.getList()
    })
  },

  computed: {
    pageTitle() {
      return '登录日志';
    },
  },
  methods: {
    // 节点点击触发
    handleNodeClick(data) {
      console.log(data);
      this.searchMap.deptId = data.id;
      this.getList();
    },
    async getList() {
      this.loading = true;
      let hiddenDate = await getHazardsList(this.searchMap)
      let deptDate = await getProjectPointControlList({ "deptId": this.searchMap.deptId})
          let projectNameArr = []
          for (const item of hiddenDate.rows) {
            for (const element of deptDate.rows) {
              // 获取项目点id和项目点名称列表
              projectNameArr.push({
                deptId: element.deptId,
                projectPointName: element.projectPointName
              })
              if (item.projectPointId == element.projectPointId) {
                item.projectPointName = element.projectPointName
              }
            }
          }
          this.dataList = hiddenDate.rows;
          this.total = hiddenDate.total;
          this.loading = false;
    },
    /** 查询按钮操作 */
    handleSearch() {
      this.searchMap.pageNum = 1;
      this.searchMap.startTime = this.dateRange[0]
      this.searchMap.endTime = this.dateRange[1]
      this.getList();
    },
    /** 重置按钮操作 */
    handleReset() {
      this.dateRange = [];
      this.$refs['searchMap'].resetFields()
      this.searchMap.pageNum = 1;
      this.getList();
    },
    // 删除数据
    handleDelete(row) {
      const ids = row.infoId || this.ids;
      if (this.$utils.isNotEmpty(ids)) {
        this.$confirm('是否确认删除日志编号为 ' + ids + ' 的数据项？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          delLoginInfo(ids).then(res => {
            if (res.code == 200) {
              this.$message.success('删除成功');
              this.getList();
            }
          });
        });
      } else {
        this.$message.warning('请选择数据进行删除');
      }
    },
    // 清空数据
    handleClean() {
      this.$confirm('是否确认清空所有登录日志数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return cleanLoginInfo();
        })
        .then(() => {
          this.getList();
          this.$message.success('清空成功');
        });
    },
    // 导出数据
    handleExport() {
      this.download(
        'system/logininfor/export',
        {
          ...this.searchMap,
        },
        `登录日志${new Date().getTime()}.xlsx`
      );
    },
    // 查看详情
    handleDetail(row) {
      // this.changeChar(row);
      this.dialogVisible = true;
      // 请求详情数据后赋值
      // this.descData = row;
    },
    // 详情取消
    cancelDetail() {
      this.dialogVisible = true;
    },
    // 若依的字典设置值为字符串，必须把数字转为字符串
    changeChar(row) {
      row.status = String(row.status);
      return row;
    },
    // 新增
    handleAdd() {
      this.addDialogVisible = true;
    },
    // 处理整改阶段
    handleRectification() {
      this.rectificatDionDialogVisible = true;
    },
    // 处理验收阶段
    handleAcceptance() {
      this.AcceptanceDionDialogVisible = true;
    },
    // 弹窗详情-取消
    cancel() {
      this.dialogVisible = false;
    },
    // 弹窗整改操作-取消
    rectificatCancel() {
      this.rectificatDionDialogVisible = false;
    },
    // 弹窗核实操作-取消
    Acceptancecancel() {
      this.AcceptanceDionDialogVisible = false;
    },
    // 弹窗新增-取消
    addCancel() {
      this.addDialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.list_container {
  flex-direction: column;
  background: url('@/assets/images/home/content.png') no-repeat;
  background-size: cover;

  .content_container {
    padding: 15px 20px;
    overflow-y: scroll;
  }

  .table_container {
    margin-bottom: 25px;
  }

  .pagination_container {
    display: flex;
    justify-content: space-between;
    height: 32px;
  }
}
</style>
